<template>
	<el-drawer v-model="showDialog" :title="t('skuDiscountSettings')" size="55%">
		<el-form :model="formData" label-width="120px" ref="formRef" class="page-form" v-if="showDialog">
			<div class="w-full sku_list">
				<el-table class="!w-[1400px] !max-w-[100%]" v-if="goodsTable.list.length" :data="goodsTable.list" size="large" ref="goods_listTableRef" @selection-change="handleSelectionChange">
					<template #empty>
						<span>{{ t('emptyData')}}</span>
					</template>
					<el-table-column type="selection" width="55" />
					<el-table-column :label="t('goodsSelectPopupGoodsInfo')" min-width="300">
						<template #default="{ row }">
							<div class="flex items-center cursor-pointer">
								<div class="min-w-[60px] h-[60px] flex items-center justify-center">
									<el-image v-if="row.sku_image" class="w-[60px] h-[60px]" :src="img(row.sku_image)" fit="contain">
										<template #error>
											<div class="image-slot">
												<img class="w-[60px] h-[60px]" src="@/addon/shop/assets/goods_default.png" />
											</div>
										</template>
									</el-image>
									<img v-else class="w-[70px] h-[60px]" src="@/addon/shop/assets/goods_default.png" fit="contain" />
								</div>
								<div class="ml-2">
									<span :title="row.sku_name" class="multi-hidden">{{ row.sku_name||row.goods?.goods_name }}</span>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="price" :label="t('price')" min-width="130" />

					<el-table-column :label="t('discounts')" width="170">
						<template #default="{ row }">
							<el-form-item v-if="row.is_enabled" :key="row.sku_id" :prop="'skuList.'+row.index + '.discount_rate'" :rules="[{
                                        trigger: 'blur',
                                        validator: (rule: any, value: any, callback: any) => {
                                            if (value.length == 0) {
                                                callback(t('discountsPlaceholder'))
                                            } else if (isNaN(value) || !regExp.number.test(value)) {
                                                callback(t('discountsTips'))
                                            } else if (value <= 0) {
                                                callback(t('discountsTipsTwo'))
                                            } else if (value>9.9) {
                                                callback(t('discountsTipsThree'))
                                            } else {
                                                callback();
                                            }
                                        }
                                    }]" class="sku-form-item-wrap">
								<el-input v-model.trim="row.discount_rate" @blur="inputBlur(row,'discount',row.index)" clearable placeholder="0.00" maxlength="8" />
							</el-form-item>
							<span v-else>{{row.discount_rate}}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('reduceMoney')" width="170">
						<template #default="{ row }">
							<el-form-item v-if="row.is_enabled" :key="row.sku_id" :prop="'skuList.'+row.index + '.reduce_money'" :rules="[{
                                        trigger: 'blur',
                                        validator: (rule: any, value: any, callback: any) => {
                                                if (value.length == 0) {
                                                    callback(t('reduceMoneyPlaceholder'))
                                                } else if (isNaN(value) || !regExp.digit.test(value)) {
                                                    callback(t('reduceMoneyTips'))
                                                } else if (value <=0) {
                                                    callback(t('reduceMoneyTipsTwo'))
                                                } else if (value >= parseFloat(row.price) ) {
                                                    callback(t('reduceMoneyTipsThree'))
                                                } else {
                                                    callback();
                                                }
                                        }
                                        }]" class="sku-form-item-wrap">
								<el-input v-model.trim="row.reduce_money" @blur="inputBlur(row,'reduce',row.index)" clearable placeholder="0.00" maxlength="8" />
							</el-form-item>
							<span v-else>{{row.reduce_money}}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('promotional')" width="170">
						<template #default="{ row }">
							<el-form-item v-if="row.is_enabled" :key="row.sku_id" :prop="'skuList.'+row.index + '.specify_price'" :rules="[{
                                        trigger: 'blur',
                                        validator: (rule: any, value: any, callback: any) => {
                                                if (value.length == 0) {
                                                    callback(t('promotionalPlaceholder'))
                                                } else if (isNaN(value) || !regExp.digit.test(value)) {
                                                    callback(t('promotionalTips'))
                                                } else if (value <=0 ) {
                                                    callback(t('promotionalTipsTwo'))
                                                }else if (value >= parseFloat(row.price) ) {
                                                    callback(t('promotionalTipsThree'))
                                                } else {
                                                    callback();
                                                }
                                        }
                                    }]" class="sku-form-item-wrap">
								<el-input v-model.trim="row.specify_price" clearable @blur="inputBlur(row,'specify',row.index)" placeholder="0.00" maxlength="8" />
							</el-form-item>
							<span v-else>{{row.specify_price}}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('discountType')" width="130">
						<template #default="{ row }">
							<span>{{row.discount_type=='discount'?t('discounts'):row.discount_type=='reduce'?t('reduceMoney'):t('promotional')}}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('operation')" fixed="right" align="right" min-width="160">
						<template #default="{row}">
							<el-button type="primary" link @click="enabledEvent(row)">{{ row.is_enabled?t('noEnabled'):t('enabled') }}</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="flex items-center justify-between mt-[15px] !w-[1400px] !max-w-[100%]">
					<div class="flex items-center mb-[15px]">
						<el-checkbox v-model="toggleCheckbox" size="large" class="!mr-[15px]" @change="toggleChange" :indeterminate="isIndeterminate">
							<span>已选{{ multipleSelection.length }}项</span>
						</el-checkbox>

						<label>{{ t('batchOperation') }}</label>
						<el-select v-model="batchOperation.discount_type" class="!w-[130px] ml-[10px]" @change="batchOperation.discountNumber=''">
							<el-option :label="t('discounts')" value="discount" />
							<el-option :label="t('reduceMoney')" value="reduce" />
							<el-option :label="t('promotional')" value="specify" />
						</el-select>
						<el-input v-model.trim="batchOperation.discountNumber" clearable
						          :placeholder="batchOperation.discount_type=='discount'?t('discounts'):batchOperation.discount_type=='reduce'?t('reduceMoney'):t('promotional')"
						          class="!w-[130px] ml-[10px]" maxlength="8" />
						<el-button class="ml-[10px]" type="primary" @click="saveBatch">{{ t('confirm') }}</el-button>
					</div>
					<el-pagination v-model:current-page="goodsTable.page" v-model:page-size="goodsTable.limit"
					               layout="total, prev, pager, next, jumper" :total="goodsTable.total"
					               @current-change="setGoodsList" />
				</div>
			</div>
		</el-form>
		<template #footer>
            <span class="dialog-footer">
                <el-button @click="showDialog = false">{{ t("cancel") }}</el-button>
                <el-button type="primary" @click="save(formRef)">{{ t("confirm") }}</el-button>
            </span>
		</template>
	</el-drawer>
</template>

<script lang="ts" setup>
    import {t} from "@/lang";
    import {img, deepClone} from "@/utils/common";
    import {FormInstance, ElMessage} from 'element-plus'
    import {ref, reactive, nextTick} from "vue";

    const showDialog = ref(false);
    const emit = defineEmits(["skuSave"]);
    const formData: Record<string, any> = ref({skuList: []})
    const formRef = ref<FormInstance>()

    // 表单验证规则
    // 正则表达式
    const regExp = {
        number: /^\d{0,10}(.?\d{0,1})$/,
        digit: /^\d{0,10}(.?\d{0,2})$/
    }

    const show = (data: any) => {
        formData.value = deepClone(data)
        //设置校验下标
        formData.value.skuList.forEach((el: any, index: number) => {
            el.index = index
        })
        setGoodsList()
        showDialog.value = true;
    };

    //设置展示商品
    interface goodsTableInterface {
        page: number,
        limit: number,
        total: number,
        data: any,
        list: Array<any>,
    }

    const goodsTable = reactive<goodsTableInterface>({
        page: 1,
        limit: 5,
        total: 0,
        data: [],
        list: []
    })

    const setGoodsList = (page = 1) => {
        if (formData.value.skuList.length) {
            goodsTable.data = splitArray(formData.value.skuList, goodsTable.limit)
            goodsTable.list = goodsTable.data[page - 1]
            goodsTable.total = parseInt(formData.value.skuList.length.toString())
            nextTick(()=>{
                batchOperation.value.discountNumber = ''
                multipleSelection.value = []
                if(goods_listTableRef.value) goods_listTableRef.value.clearSelection()
                if(isIndeterminate.value) isIndeterminate.value = false
                if(toggleCheckbox.value) toggleCheckbox.value = false
            })
        } else {
            goodsTable.data = []
            goodsTable.list = []
            goodsTable.total = 0
            goodsTable.page = 1
        }
    }

    //完整数据转分页数据
    const splitArray = (array: [], size: number) => {
        var result = [];
        for (var i = 0; i < array.length; i += size) {
            result.push(array.slice(i, i + size));
        }
        return result;
    }

    /*****批量设置 ****/
    interface batchOperationInterface {
        discount_type: any,
        discountNumber: any,
    }

    const batchOperation = ref<batchOperationInterface>({
        discount_type: 'discount',
        discountNumber: ''
    })

    // 批量复选框
    const toggleCheckbox = ref()

    // 复选框中间状态
    const isIndeterminate = ref(false)

    // 监听批量复选框事件
    const toggleChange = (value: any) => {
        isIndeterminate.value = false
        goods_listTableRef.value.toggleAllSelection()
    }
    const goods_listTableRef = ref()

    // 选中数据
    const multipleSelection: any = ref([])

    // 监听表格单行选中
    const handleSelectionChange = (val: []) => {
        multipleSelection.value = val

        toggleCheckbox.value = false
        if (multipleSelection.value.length > 0 && multipleSelection.value.length < goodsTable.list.length) {
            isIndeterminate.value = true
        } else {
            isIndeterminate.value = false
        }

        if (multipleSelection.value.length == goodsTable.list.length) {
            toggleCheckbox.value = true
        }
    }
    const saveBatch = () => {
        if (!multipleSelection.value.length) {
            ElMessage({
                type: 'warning',
                message: `${t('batchEmptySelectedGoodsTips')}`
            })
            return
        }
        if (batchOperation.value.discount_type == 'discount') {
            if (batchOperation.value.discountNumber.length == 0) {
                ElMessage({
                    type: 'warning',
                    message: `${t('discountsPlaceholder')}`
                })
                return
            } else if (isNaN(batchOperation.value.discountNumber) || !regExp.number.test(batchOperation.value.discountNumber)) {
                ElMessage({
                    type: 'warning',
                    message: `${t('discountsTips')}`
                })
                return
            } else if (batchOperation.value.discountNumber <= 0) {
                ElMessage({
                    type: 'warning',
                    message: `${t('discountsTipsTwo')}`
                })
                return
            } else if (batchOperation.value.discountNumber > 9.9) {
                ElMessage({
                    type: 'warning',
                    message: `${t('discountsTipsThree')}`
                })
                return
            }
        } else if (batchOperation.value.discount_type == 'reduce') {
            if (batchOperation.value.discountNumber.length == 0) {
                ElMessage({
                    type: 'warning',
                    message: `${t('reduceMoneyPlaceholder')}`
                })
                return
            } else if (isNaN(batchOperation.value.discountNumber) || !regExp.digit.test(batchOperation.value.discountNumber)) {
                ElMessage({
                    type: 'warning',
                    message: `${t('reduceMoneyTips')}`
                })
                return
            } else if (batchOperation.value.discountNumber <= 0) {
                ElMessage({
                    type: 'warning',
                    message: `${t('reduceMoneyTipsTwo')}`
                })
                return
            }

        } else {
            if (batchOperation.value.discountNumber.length == 0) {
                ElMessage({
                    type: 'warning',
                    message: `${t('promotionalPlaceholder')}`
                })
                return
            } else if (isNaN(batchOperation.value.discountNumber) || !regExp.digit.test(batchOperation.value.discountNumber)) {
                ElMessage({
                    type: 'warning',
                    message: `${t('promotionalTips')}`
                })
                return
            } else if (batchOperation.value.discountNumber <= 0) {
                ElMessage({
                    type: 'warning',
                    message: `${t('promotionalTipsTwo')}`
                })
                return
            }
        }
        formData.value.skuList.forEach((el: any, index: number) => {
            multipleSelection.value.forEach((v: any) => {

                if (v.sku_id === el.sku_id&&el.is_enabled===1) {
                    
                    if (batchOperation.value.discount_type == 'discount') {
                        //折扣
                        el.discount_rate = batchOperation.value.discountNumber + ''
                        //实际
                        el.specify_price = (el.price * (batchOperation.value.discountNumber / 10)).toFixed(2)
                        el.discount_price = (el.price * (batchOperation.value.discountNumber / 10)).toFixed(2)
                        //减价
                        el.reduce_money = (el.price - el.specify_price).toFixed(2)
                    } else if (batchOperation.value.discount_type == 'reduce') {//减价
                        el.reduce_money = batchOperation.value.discountNumber + ''
                        el.specify_price = (el.price - el.reduce_money).toFixed(2)
                        el.discount_price = (el.price - el.reduce_money).toFixed(2)
                        el.discount_rate = (el.specify_price / el.price * 10).toFixed(1)

                    } else {//实际
                        el.specify_price = batchOperation.value.discountNumber + ''
                        el.discount_price = batchOperation.value.discountNumber + ''
                        el.reduce_money = (el.price - el.specify_price).toFixed(2)
                        el.discount_rate = (el.specify_price / el.price * 10).toFixed(1)
                    }
                    el.discount_type = batchOperation.value.discount_type + ''
                    if (formRef.value) {
                        formRef.value.validateField('skuList.' + index + '.discount_rate')
                        formRef.value.validateField('skuList.' + index + '.specify_price')
                        formRef.value.validateField('skuList.' + index + '.reduce_money')
                    }
                }
            })
        })
        // isIndeterminate.value = false
        // toggleCheckbox.value = false
        // batchOperation.value.discountNumber = ''
        // goods_listTableRef.value.clearSelection()
    }

    /**** 修改单行 *****/
    const inputBlur = (row: any, discount_type: string, index: number) => {
        if (discount_type == 'discount') {
            if (row.discount_rate.length) {
                //实际
                row.specify_price = (row.price * (row.discount_rate / 10)).toFixed(2)
                row.discount_price = (row.price * (row.discount_rate / 10)).toFixed(2)
                //减价
                row.reduce_money = (row.price - row.specify_price).toFixed(2)
            }
        } else if (discount_type == 'reduce') { // 减价
            if (row.reduce_money.length) {
                row.specify_price = (row.price - row.reduce_money).toFixed(2)
                row.discount_price = (row.price - row.reduce_money).toFixed(2)
                row.discount_rate = (row.specify_price / row.price * 10).toFixed(1)
            }

        } else { // 实际
            if (row.specify_price.length) {
                row.discount_price = row.specify_price + ''
                row.reduce_money = (row.price - row.specify_price).toFixed(2)
                row.discount_rate = (row.specify_price / row.price * 10).toFixed(1)
            }

        }
        row.discount_type = discount_type + ''
        if (formRef.value) {
            // console.log('skuList.' + index + '.discount_rate')
            // formRef.value.validateField('skuList.'+ index + '.discount_rate').catch(()=>{})
            // formRef.value.validateField('skuList.'+ index + '.specify_price').catch(()=>{})
            // formRef.value.validateField('skuList.'+ index + '.reduce_money').catch(()=>{})
        }
    }

    //sku状态
    const enabledEvent = (row: any) => {
        row.is_enabled = row.is_enabled ? 0 : 1
        if (row.is_enabled) {
            row.discount_type = 'discount'
            row.discount_rate = ''
            row.reduce_money = ''
            row.specify_price = ''
        } else {
            row.discount_type = 'discount'
            row.discount_rate = '10'
            row.reduce_money = '0'
            row.specify_price = row.price + ''
        }

    }
    const validFn = (row: any) => {
        if(row.is_enabled===0){
            return true
        }
        if (row.discount_rate.length == 0) {
            return false
        } else if (isNaN(row.discount_rate) || !regExp.number.test(row.discount_rate)) {
            return false
        } else if (row.discount_rate <= 0) {
            return false
        } else if (row.discount_rate > 9.9) {
            return false
        } else if (row.reduce_money.length == 0) {
            return false
        } else if (isNaN(row.reduce_money) || !regExp.digit.test(row.reduce_money)) {
            return false
        } else if (row.reduce_money <= 0) {
            return false
        } else if (row.reduce_money >= parseFloat(row.price)) {
            return false
        } else if (row.specify_price.length == 0) {
            return false
        } else if (isNaN(row.specify_price) || !regExp.digit.test(row.specify_price)) {
            return false
        } else if (row.specify_price <= 0) {
            return false
        } else if (row.specify_price >= parseFloat(row.price)) {
            return false
        } else {
            return true
        }
    }

    const save = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        for (var i = 0; i < formData.value.skuList.length; i++) {
            if (!validFn(formData.value.skuList[i])) {
                let page = Math.ceil(i + 1 <= goodsTable.limit ? 1 : (i + 1) / goodsTable.limit)
                goodsTable.list = goodsTable.data[page - 1]
                goodsTable.page = page
                break;
            }
            
        }
        nextTick(async () => {
            await formEl.validate((valid) => {
                if (valid) {
                    formData.value.valid = true
                    let discount_rate_list = formData.value.skuList.filter((el:any)=>el.is_enabled===1).map((el:any)=>Number(el.discount_rate))
                    let reduce_money_list = formData.value.skuList.filter((el:any)=>el.is_enabled===1).map((el:any)=>Number(el.reduce_money))
                    let specify_price_list = formData.value.skuList.filter((el:any)=>el.is_enabled===1).map((el:any)=>Number(el.specify_price))
                    formData.value.max_discount_rate = Math.max(...discount_rate_list)
                    formData.value.min_discount_rate = Math.min(...discount_rate_list)
                    formData.value.max_reduce_money = Math.max(...reduce_money_list)
                    formData.value.min_reduce_money = Math.min(...reduce_money_list)
                    formData.value.max_specify_price = Math.max(...specify_price_list)
                    formData.value.min_specify_price = Math.min(...specify_price_list)
                    emit("skuSave", formData.value);
                    showDialog.value = false;
                }
            })
        })

    };
    defineExpose({
        show
    });
</script>

<style lang="scss" scoped>
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		-o-appearance: none !important;
		-ms-appearance: none !important;
		appearance: none !important;
		margin: 0;
	}

	input[type="number"] {
		-webkit-appearance: textfield;
		-moz-appearance: textfield;
		-o-appearance: textfield;
		-ms-appearance: textfield;
		appearance: textfield;
	}

	.sku-form-item-wrap :deep(.el-form-item__content) {
		margin-left: 0 !important;
	}

	.sku_list :deep(.cell) {
		// min-height: 60px !important;
		overflow: initial !important;
	}
</style>
  